<template>
  <div class="customer-card">
    <CardTitle title="客户群互动" @change="onChangeCardTitle" />
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-form :inline="true" :model="state.formData" class="demo-form-inline">
        <el-form-item label="事件名称">
          <el-cascader v-model="state.formData.cascaderValue" :options="state.cascaderOptions" :props="cascaderProps" :show-all-levels="false" placeholder="请选择" clearable @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="员工">
          <el-select v-model="state.formData.userValue" placeholder="全部" multiple collapse-tags popper-class="zw-hide_select_option" @click.stop="openDepart">
            <el-option v-for="(item, index) in state.userOption" :key="index" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(false)">查询</el-button>
          <el-button @click="onSubmit(true)">清空</el-button>
        </el-form-item>
      </el-form>
      <el-tab-pane label="互动轨迹" name="1">
        <List maxHeight="280" :isLoading="isLoading" :sorter="state.sorter" :status="status" :dataList="state.dataList" @change="onChangeList" />
      </el-tab-pane>
    </el-tabs>

    <ZWDepart ref="DepartRef" @submit="getZWDepartData" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from '@/store'
import { getSetionId } from '@/utils/utils'
import { useRoute } from 'vue-router'

import CardTitle from './CardTitle.vue'
import List from './List.vue'
import ZWDepart from '@/components/ZWDepart.vue'

import { getEventList, getCustomerDynamicList } from '@/api/customerCenter'

const router = useRoute()

interface State {
  time: any
  userList: any
  dataList: any
  cascaderOptions: any
  formData: {
    cascaderValue: any
    userValue: number[]
  }
  userOption: Array<{ id: number; name: string | number | undefined }>
  sorter: { pageNum: number; pageSize: number; total: number }
}

const store = useStore()
const isLoading = ref(false)
const activeName = ref('1')
const status = ref(1)
const DepartRef = ref({})
const state: State = ref({
  time: [],
  userList: [],
  dataList: [],
  cascaderOptions: [],
  formData: {
    cascaderValue: [],
    userValue: []
  },
  userOption: [],
  sorter: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
})
const cascaderProps: Object = {
  expandTrigger: 'hover',
  label: 'name',
  value: 'id'
}
// 获取事件列表
getEventList({ event_type: '2' }).then((res: any) => {
  state.value.cascaderOptions = res[0].children
})

const getStaffTrackData = (type: sting) => {
  isLoading.value = true
  // let param = {
  //   groupchat_id: router.query.id || 1,
  //   time: state.value.time,
  //   event_id: !state.value.formData.cascaderValue.length ? '' : state.value.formData.cascaderValue[state.value.formData.cascaderValue.length - 1],
  //   work_user_id: state.value.formData.userValue.toString(),
  //   page: state.value.sorter.pageNum,
  //   page_size: state.value.sorter.pageSize
  // }
  const param = {
    groupchat_id: router.query.id || 1,
    behaviour_id: !state.value.formData.cascaderValue?.length ? '' : state.value.formData.cascaderValue[state.value.formData.cascaderValue.length - 1],
    behaviour_time: state.value.time,
    work_user_ids: state.value.formData.userValue,
    page: state.value.sorter.pageNum,
    page_size: state.value.sorter.pageSize,
    type: 2 //1 客户 2 客户群
  }
  getCustomerDynamicList(param).then((res: any) => {
    isLoading.value = false
    if (!type) {
      state.value.dataList.push(...res.data)
    } else {
      state.value.dataList = res.data
    }
    state.value.sorter.total = res.total
  })
}

const handleChange = (value: Array<Object>) => {
  console.log(value)
}

const onChangeCardTitle = (e: any) => {
  // state.value.time = e.join('~')
  state.value.sorter.pageNum = 1
  state.value.time = e
  if (activeName.value) getStaffTrackData('creat')
}
const onChangeList = (e: any) => {
  state.value.sorter.pageNum++
  getStaffTrackData()
}

const onSubmit = (isInit: boolean) => {
  if (isInit) {
    state.value.formData = {
      cascaderValue: [],
      userValue: []
    }
  }
  state.value.sorter.pageNum = 1
  getStaffTrackData('creat')
}

//打开 选择员工弹框
const openDepart = () => {
  DepartRef.value.appDialog.chooseArr = state.value.formData.userValue.length > 0 ? state.value.formData.userValue : []
  DepartRef.value.appDialog.multiple = true //是否多选
  DepartRef.value.appDialog.isInit = true
  DepartRef.value.departVisble = true
}
// 获取当前选中的员工的数据
const getZWDepartData = (val: any) => {
  state.value.userOption = val
  state.value.formData.userValue = getSetionId('id', val)
}
</script>

<style lang="scss" scoped>
.customer-card {
  padding: 16px 20px;

  .cont-box {
    display: flex;
    justify-content: space-between;

    .left-box {
      flex: 0 0 310px;
      width: 310px;
    }
    .right-box {
      flex: auto;
      padding: 10px 20px;
      margin-left: 16px;
      background: #ffffff;
      border: 1px solid #eaeaea;
    }
  }
  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-box {
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
      }

      .desc {
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        :deep .led {
          color: #ff6b00;
        }
      }
    }

    .el-select {
      width: 120px;
    }
  }
}
</style>
